<template>
  <div class="favorites-container">
    <van-nav-bar
      title="我的收藏"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="course-list">
          <div v-for="course in courseList" :key="course.id" class="course-item">
            <div class="course-image">
              <img :src="course.image" :alt="course.name">
              <span class="course-tag" v-if="course.tag">{{ course.tag }}</span>
            </div>
            <div class="course-info">
              <div class="course-name">{{ course.name }}</div>
              <div class="course-desc">{{ course.description }}</div>
              <div class="course-footer">
                <div class="course-price">
                  <span class="price">¥{{ course.price }}</span>
                  <span class="original-price" v-if="course.originalPrice">¥{{ course.originalPrice }}</span>
                </div>
                <div class="action-buttons">
                  <van-button size="small" @click="onUnfavorite(course)">取消收藏</van-button>
                  <van-button size="small" type="primary" @click="onBuy(course)">立即购买</van-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'

const router = useRouter()

// 列表状态
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const courseList = ref([])

// 模拟课程数据
const mockCourses = [
  {
    id: 1,
    name: '高中数学提高班 - 函数与导数专题',
    description: '针对高考重点难点，系统讲解函数与导数知识点，配套习题讲解和考点分析',
    image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    price: '299.00',
    originalPrice: '399.00',
    tag: '热门'
  },
  {
    id: 2,
    name: '英语口语训练营 - 零基础到流利表达',
    description: '从发音、语法到口语表达，全方位提升英语口语能力，配套真人外教一对一辅导',
    image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    price: '399.00',
    originalPrice: '599.00',
    tag: '推荐'
  },
  {
    id: 3,
    name: 'Python编程基础 - 从入门到实践',
    description: '零基础入门Python编程，通过实践项目掌握编程思维和技能，适合初学者',
    image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    price: '499.00',
    originalPrice: '699.00'
  }
]

// 加载更多
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      courseList.value = []
      refreshing.value = false
    }

    // 模拟加载更多数据
    courseList.value.push(...mockCourses)
    loading.value = false

    // 模拟数据加载完成
    if (courseList.value.length >= 6) {
      finished.value = true
    }
  }, 1000)
}

// 下拉刷新
const onRefresh = () => {
  finished.value = false
  loading.value = true
  onLoad()
}

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 取消收藏
const onUnfavorite = (course) => {
  showDialog({
    title: '提示',
    message: '确定要取消收藏该课程吗？',
    theme: 'round-button'
  }).then(() => {
    // TODO: 调用取消收藏接口
    showToast('已取消收藏')
    courseList.value = courseList.value.filter(item => item.id !== course.id)
  })
}

// 购买课程
const onBuy = (course) => {
  router.push(`/course/${course.id}`)
}
</script>

<style lang="scss" scoped>
.favorites-container {
  min-height: 100vh;
  background-color: #f7f8fa;

  .course-list {
    padding: 12px;
  }

  .course-item {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;

    .course-image {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%; // 16:9 比例

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .course-tag {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 2px 6px;
        background: rgba(238, 10, 36, 0.8);
        color: #fff;
        font-size: 12px;
        border-radius: 4px;
      }
    }

    .course-info {
      padding: 12px;

      .course-name {
        font-size: 16px;
        font-weight: 500;
        color: #323233;
        margin-bottom: 8px;
      }

      .course-desc {
        font-size: 13px;
        color: #969799;
        margin-bottom: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .course-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .course-price {
          .price {
            font-size: 16px;
            font-weight: 500;
            color: #ee0a24;
            margin-right: 8px;
          }

          .original-price {
            font-size: 12px;
            color: #969799;
            text-decoration: line-through;
          }
        }

        .action-buttons {
          display: flex;
          gap: 8px;
        }
      }
    }
  }
}
</style>
